<template>
  <div class="warehouse layout-content">
    <c-table
      :data="tableData.pageData"
      :add="$btn('addWarehouse')"
      :total="tableData.total"
      :columns="columns"
      :loading="tableLoading"
      search
      searchPlaceholder="可输入仓库全称或简称进行搜索"
      @onSearch="onSearch"
      @onAdd="add"
      @onReload="reload"
      @pageChange="pageChange"
    >
      <!-- <template v-slot:header-l>
        <c-button type="primary">导出</c-button>
      </template> -->
      <template v-slot:categorysFee="{ row }">
        <div class="categorysFeeWrapper">
          <div v-for="item in row" :key="item.categoryId" class="categorysFee">
            <a-tag color="blue">{{ item.categoryName }}</a-tag>
            <span>{{ item.fee }} 元/吨</span>
          </div>
        </div>
      </template>
      <template v-slot:createDate="{ row }">
        <span>{{ $getTime(row) }}</span>
      </template>
      <template v-slot:areaName="{ row }">
        <a-tag color="blue">{{ row }}</a-tag>
      </template>
    </c-table>
    <UpdateWarehouse
      v-model="updateVisible"
      :title="updateTitle"
      v-if="updateVisible"
      @updated="updatedWarehouse"
    />
  </div>
</template>

<script>
import { getcompanywarehousespage } from "@/api/warehouse";
import UpdateWarehouse from "./components/update";

const columns = [
  {
    title: "编号",
    dataIndex: "warehouseCode"
  },
  {
    title: "仓库全称",
    dataIndex: "name"
  },
  {
    title: "仓库简称",
    dataIndex: "shortName"
  },
  {
    title: "相关品种及转货权费用",
    dataIndex: "categorysFee",
    scopedSlots: { customRender: "categorysFee" }
  },
  {
    title: "所在地区",
    dataIndex: "areaName",
    scopedSlots: { customRender: "areaName" }
  },
  {
    title: "所在省份",
    dataIndex: "provinceName"
  },
  {
    title: "所在城市",
    dataIndex: "cityName"
  },
  {
    title: "具体地址",
    dataIndex: "address"
  },
  {
    title: "创建时间",
    dataIndex: "createDate",
    scopedSlots: { customRender: "createDate" }
  },
  {
    title: "操作",
    scopedSlots: { customRender: "handle" },
    hidden: true
  }
];

export default {
  components: {
    UpdateWarehouse
  },
  data() {
    return {
      tableLoading: false,
      tableData: {},
      columns,
      pageNum: 1,
      searchKey: undefined,
      updateTitle: undefined,
      updateVisible: false // 新增仓库显隐
    };
  },
  computed: {
    // 校验相关品种是否填写完整，即一行中品种和转货权要么都不填，要么都填
    validateCorrelationCategory() {
      return (idx, name) => {
        let className = "";
        if (name == "categoryId") {
          if (
            this.updateForm.categoryFees[idx].categoryId.length === 0 &&
            this.updateForm.categoryFees[idx].fee
          ) {
            className = "has-error";
          }
        } else if (name === "fee") {
          if (
            !this.updateForm.categoryFees[idx].fee &&
            this.updateForm.categoryFees[idx].categoryId.length !== 0
          ) {
            className = "has-error";
          }
        }
        return className;
      };
    }
  },
  methods: {
    // 搜索
    onSearch(val) {
      this.searchKey = val;
      this.reload();
    },
    // 新增、编辑仓库成功后回调
    updatedWarehouse() {
      this.updateVisible = false;
      this.reload();
    },
    reload() {
      this.pageNum = 1;
      this.getWarehouseList();
    },
    // 新增仓库
    add() {
      this.updateTitle = "新增仓库";
      this.updateVisible = true;
    },
    // 编辑仓库
    edit() {
      this.updateTitle = "编辑仓库";
      this.updateVisible = true;
    },
    // 获取仓库列表
    getWarehouseList() {
      this.tableLoading = true;
      getcompanywarehousespage({
        searchKey: this.searchKey,
        pageData: {
          pageNum: this.pageNum,
          pageSize: 20
        }
      })
        .then(res => {
          this.tableData = res;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    pageChange(page) {
      this.pageNum = page;
      this.getWarehouseList();
    }
  },
  created() {
    this.getWarehouseList();
  }
};
</script>

<style lang="scss" scoped>
.categorysFeeWrapper {
  max-height: 96px;
  overflow: auto;
  .categorysFee:not(:last-child) {
    .ant-tag {
      margin-bottom: 2px;
    }
  }
}
</style>
